<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="additionCount(5)">+5</button>
    <button @click="additionCount(10)">+10</button>
    <button @click="addStudent()">添加学生</button>
    <hr>
    <h2>{{$store.getters.getMore20Student}}</h2>
    <hr>
    <h2>more20StuLength:{{$store.getters.more20StuLength}}</h2>
    <hr>
    <h2>moreAgeStu:{{$store.getters.moreAgeStu(8)}}</h2>
    <hr>
    <hello-vuex></hello-vuex>
    <hr>
    <h2>App内容：info对象是否是响应式的</h2>
    <h2>{{$store.state.info}}</h2>
    <button @click="updateInfo">修改信息</button>
    <hr>
    <h2>module中的内容</h2>
    <h2>{{$store.state.a.name}}</h2>
  </div>
</template>

<script>
import HelloVuex from "./components/HelloVuex";

export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vuex'
    }
  },
  methods: {
    addition() {
      this.$store.commit('increment')
    },
    subtraction() {
      this.$store.commit('decrement')
    },
    additionCount(count) {
      // 1. 普通的提交风格
      // this.$store.commit('incrementCount', count)

      // 2. 特殊的提交风格
      this.$store.commit({
        type: 'incrementCount',
        count: count
      })
    },
    addStudent(){
      const stu = {name: 'alan', age: 35}
      this.$store.commit('addStudent', stu)
    },
    updateInfo() {
      this.$store
        .dispatch('aUpdateInfo', '我是携带的信息')
      .then(res => {
        console.log('里面完成了提交');
        console.log(res)
      })
    }
  },
  components: {
    HelloVuex
  }
}
</script>

<style>

</style>
